<template>
  <div class="home">
    <!--   <div class="home-title">
      <div style="display: flex; align-items: center;">
        <img src="../../assets/images/logo.png" class="logo" />
        <span>中电大数据共享平台管理系统</span>
      </div>
      <div>
        <p title="退出登录" class="logout" @click="loginOut">
          <i class="fa fa-sign-out fa-3x"></i>
        </p>
      </div>
    </div>
    <div class="menu-wrap">
    <div
        class="menu"
        v-for="(item, index) in menuList"
        :key="index"
        @click="inSystem(item, index)"
      >
        <div class="menu-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="menu-name">{{ item.name }}</div>
      </div> 
    </div>
    <Footer class="footer"></Footer>-->

    <div class="navCon">
      <div class="move">
        <div class="runingA">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="824px"
            height="188px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,188.500 L824.500,0.500 "
            ></path>
          </svg>
        </div>
        <div class="runingB">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="834px"
            height="212px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,212.500 L834.500,0.500 "
            ></path>
          </svg>
        </div>
        <div class="runingC">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="853px"
            height="334px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,334.500 L853.500,0.500 "
            ></path>
          </svg>
        </div>
        <div class="runingD">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="869px"
            height="362px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M869.500,363.437 L0.500,1.437 "
            ></path>
          </svg>
        </div>
        <div class="runingE">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="814px"
            height="228px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M814.500,229.469 L0.500,1.469 "
            ></path>
          </svg>
        </div>
        <div class="runingF">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="792px"
            height="201px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M792.500,202.469 L0.500,1.469 "
            ></path>
          </svg>
        </div>
        <div class="runingG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="1920px"
            height="1px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,0.500 L1920.500,0.500 "
            ></path>
          </svg>
        </div>
        <div class="runingH">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="1920px"
            height="1px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,0.500 L1920.500,0.500 "
            ></path>
          </svg>
        </div>
        <div class="runingI">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="1920px"
            height="1px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,0.500 L1920.500,0.500  "
            ></path>
          </svg>
        </div>

        <div class="move-hd moveA">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="871px"
            height="258px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,258.500 L469.500,119.500 L756.500,34.500 L871.500,0.500"
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveB">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="920px"
            height="548px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,547.500 L457.500,275.500 L919.500,0.500"
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveC">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="456px"
            height="539px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,539.500 L245.500,251.500 L405.500,61.500 L455.500,0.500"
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveD">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="1px"
            height="540px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M0.500,539.500 L0.500,157.500 L0.500,0.500"
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveE">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="463px"
            height="541px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M462.500,541.156 L230.500,269.156 L56.500,66.156 L0.500,1.156"
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveF">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="933px"
            height="546px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M932.500,546.375 L613.500,359.375 L324.500,189.375 L57.500,34.375 L0.500,1.375 "
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="move-hd moveG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="897px"
            height="293px"
          >
            <path
              stroke="#00baff"
              stroke-width="1px"
              opacity="0.15"
              d="M897.500,293.437 L598.500,196.437 L257.500,86.437 L114.500,40.437 L0.500,1.437 "
            ></path>
          </svg>
          <img src="../../assets/images/xx/move.png" />
        </div>
        <div class="bjtu"></div>
      </div>

      <div class="logo">
        <p title="退出登录" class="logout" @click="loginOut">
          <i class="fa fa-sign-out fa-3x"></i>
        </p>
      </div>
      <h3 class="biaoti">项目信息管理系统</h3>
      <ul class="navtop">
        <div :class="activeClass">
          <li
            :class="[item.active, item.class]"
            v-for="(item, index) in menuList"
            :key="index"
            @click="clickNav(item, index)"
          >
            <span>{{ item.name }}</span>
          </li>
        </div>
      </ul>

      <ul class="navbot">
        <li :class="active[0]['active'] ? 'active' : ''">
           <dl class="wz1">
            <a @click="$router.push({path:'/project'})">
              <dt><span></span></dt>
              <dd>
                <h6>工程管理</h6>
                <p>工程管理</p>
              </dd>
            </a>
          </dl>  
          <dl class="wz2">
            <a @click="$router.push({path:'/home'})">
              <dt><span></span></dt>
              <dd>
                <h6>项目总览</h6>
                <p>项目总览</p>
              </dd>
            </a>
          </dl>
        <dl class="wz3">
            <a >

              <dt><span></span></dt>
              <dd>
                <h6>系统管理</h6>
                <p>系统管理</p>
              </dd>
            </a>
          </dl>
          <dl class="wz5">
            <a >

              <dt><span></span></dt>
              <dd>
                <h6>驾驶舱</h6>
                <p>驾驶舱</p>
              </dd>
            </a>
          </dl>
          <dl class="wz6">
            <a >
              <dt><span></span></dt>
              <dd>
                <h6>资源管理</h6>
                <p>资源管理</p>
              </dd>
            </a>
          </dl> 
       <!--   <dl class="wz7">
            <a @click="clickChild('ihematicInformation',0)">
              <dt><span></span></dt>
              <dd>
                <h6>专题信息资源目录</h6>
                <p>专题信息资源目录</p>
              </dd>
            </a>
          </dl>   -->
        </li>
        <li :class="active[1]['active'] ? 'active' : ''">
         <!--  <dl class="wz2">
            <a @click="$router.push({path:'/project'})">
              <dt><span></span></dt>
              <dd>
                <h6>工程管理</h6>
                <p>工程管理</p>
              </dd>
            </a>
          </dl>
            <dl class="wz6">
            <a @click="$router.push({path:'/project'})">
              <dt><span></span></dt>
              <dd>
                <h6>工程管理</h6>
                <p>工程管理</p>
              </dd>
            </a>
          </dl> 
           
            <dl class="wz1">
            <a @click="$router.push({path:'/project'})">
              <dt><span></span></dt>
              <dd>
                <h6>工程管理</h6>
                <p>工程管理</p>
              </dd>
            </a>
          </dl> -->
        </li>
        <li :class="active[2]['active'] ? 'active' : ''">
         <!--  <dl class="wz2">
            <a >

              <dt><span></span></dt>
              <dd>
                <h6>资源管理</h6>
                <p>资源管理</p>
              </dd>
            </a>
          </dl>

          <dl class="wz6">
            <a >

              <dt><span></span></dt>
              <dd>
                <h6>系统管理</h6>
                <p>系统管理</p>
              </dd>
            </a>
          </dl> -->
        </li>
        <li :class="active[3]['active'] ? 'active' : ''">
         
        <!--   <dl class="wz4">
            <a >
              <dt><span></span></dt>
              <dd>
                <h6>驾驶舱</h6>
                <p>驾驶舱</p>
              </dd>
            </a>
          </dl> -->
        </li>
      </ul>
      <div class="links">
        copyright© 2019 北京中电兴发科技有限公司
      </div>
    </div>
  </div>
</template>

<script>
import modelBox from "@/components/DialogBox/modelBox";
import Footer from "@/layout/components/Footer";
import { getSystemTitle } from "@/utils/get-page-title";
export default {
  components: {
    modelBox,
    Footer
  },
  data() {
    return {
      icon: "fa fa-object-group fa-5x",

      active: [
        {
          active: true
        },
        {
          active: false
        },
        {
          active: false
        },
        {
          active: false
        }
      ],
      activeClass: "active1",
      menuList: [
        {
          active: "active",
          class: "nav1",
          id: 2,
          name: "项目信息",
          show: false,
          icon: "fa fa-database fa-5x",
          navUrl: "nav-2",
          router: "/dataDirectoryManagement"
        },
        {
          class: "nav2",
          active: "",
          id: 5,
          name: "工程管理",
          show: false,
          icon: "fa fa-feed fa-5x",
          navUrl: "nav-5",
          router: "/subscribe"
        },

        {
          class: "nav3",
          active: "",
          id: 1,
          name: "系统管理",
          show: true,
          icon: "fa fa-object-group fa-5x",
          navUrl: "nav-1",
          router: "/organization"
        },
        {
          class: "nav4",
          active: "",
          id: 3,
          name: "运维应用",
          show: false,
          icon: "fa fa-user fa-5x",
          navUrl: "nav-3",
          router: "/userAdmin"
        }
        /* {
          id: 4,
          name: "共享平台",
          show: false,
          icon: "fa fa-share-alt-square fa-5x",
          navUrl: "nav-4",
          router: "/share"
        }, */
        /* ,
        {
          id: 6,
          name: "待定",
          show: false,
          icon: "fa fa-object-group fa-5x",
          navUrl: "nav-6"
        },
        {
          id: 7,
          name: "待定",
          show: false,
          icon: "fa fa-object-group fa-5x",
          navUrl: "nav-7"
        },
        {
          id: 8,
          name: "待定",
          show: false,
          icon: "fa fa-object-group fa-5x",
          navUrl: "nav-8"
        } */
      ]
    };
  },
  mounted() {
   
  },
  methods: {
    inSystem(item, index) {
      // this.$store.dispatch('user/setSystemId', item.id);
      localStorage.setItem("systemId", item.id);
      localStorage.setItem("systemName", item.name);

      document.title = getSystemTitle(item.name);

      this.$router.push({ path: item.router });
      //清空tagsView
      this.$store.state.tagsView.visitedViews = [];

      //展开侧边导航栏
      this.$store.dispatch("app/openSideBar");
    },
    clickChild(path, index) {
      localStorage.setItem("systemId",this.menuList[index].id);
      localStorage.setItem("systemName",this.menuList[index].name);

      document.title = getSystemTitle(this.menuList[index].name);

      this.$router.push({ name: path });
      //清空tagsView
      this.$store.state.tagsView.visitedViews = [];

      //展开侧边导航栏
      this.$store.dispatch("app/openSideBar");
    },
    enterNav(item, index) {
      let that = this;
      if (item.id === 10) return;
      that.menuList.forEach((val, i) => {
        val.show = false;
        if (i === index) {
          val.show = true;
        }
      });
    },
    loginOut() {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        type: "success",
        message: "退出登录成功",
        duration: 2000
      });
      sessionStorage.setItem("auth", "");
    },
    clickNav(item, index) {
  
      this.menuList.forEach((e, index) => {
        e.active = "";
        this.active[index].active = false;
      });
      this.active[index].active = true;
      this.activeClass = "active" + Number(index + 1);
      this.$set(this.menuList[index], "active", "active");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
@media screen and (min-width: 1800px) {
  .home {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 650px;
    min-width: 1000px;
    background: url(../../assets/images/home/banner02.png) top left no-repeat;
    background-size: cover;
    .home-title {
      width: 80%;
      margin: 0 auto;
      padding: 4% 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 70px;
        font-weight: bold;
        letter-spacing: 3px;
        color: #01abdf;
      }
      .logo {
        width: 120px;
        height: 120px;
        margin-right: 10px;
      }
    }
    .menu-wrap {
      width: 80%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .menu {
        width: 16%;
        margin: 0 60px 30px;
        background: rgba(120, 127, 206, 0.7);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: relative;
        &:hover {
          transform: translateY(-10px);
        }
        transition: all 0.5s;
        cursor: pointer;

        .menu-icon {
          position: absolute;
          top: 25%;
          color: #030923;
        }
        .menu-name {
          position: absolute;
          top: 60%;
          font-size: 26px;
          font-weight: bold;
          color: #fff;
        }
      }
      .menu::before {
        content: "";
        padding-top: 100%;
        display: block;
      }
    }
    /deep/ {
      .footer {
        left: 50%;
        transform: translate(-50%);
        font-size: 25px;
        span {
          color: #fff !important;
        }
      }
    }
  }
}
@media screen and (max-width: 1800px) {
  .home {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 650px;
    background: url(../../assets/images/home/banner02.png) top left no-repeat;
    background-size: cover;
    .home-title {
      width: 1100px;
      margin: 0 auto;
      padding: 30px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #01abdf;
      }
      .logo {
        width: 80px;
        height: 80px;
        margin-right: 8px;
      }
    }
    .menu-wrap {
      width: 1100px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .menu {
        width: 190px;
        height: 190px;
        margin: 30px;
        background: rgba(120, 127, 206, 0.7);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        &:hover {
          transform: translateY(-10px);
        }
        transition: all 0.5s;
        cursor: pointer;
        .menu-icon {
          color: #030923;
        }
        .menu-name {
          height: 50px;
          line-height: 50px;
          font-size: 22px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    /deep/ {
      .footer {
        left: 50%;
        transform: translate(-50%);
        font-size: 25px;
        span {
          color: #fff !important;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.home {
  .el-input__inner {
    width: 260px;
  }
}
.logout {
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  &:hover {
    color: #01abdf;
  }
}
</style>
